<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            width: 500px;
            height: 200px;
            background-color: aqua;
            overflow: hidden;
            display: flex;
        }
        p{
            position: relative;
            display: flex;
            text-align: center;
            margin: 0 auto;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div id="container">
        <p id="text">安徽胜利元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法。</p>
    </div>
</body>
<script>
    function getRoll() {
        var div = document.getElementById("container")
        var divWidth = div.offsetWidth
        var text = document.getElementById("text")
        var textWidth = text.offsetWidth
        textWidth.innerHTML += textWidth.innerHTML
        // if(textWidth >= divWidth ) {
        //     let left = 0
        //     text.innerHTML += text.innerHTML
        //     setInterval(function(){
        //         left -= 1
        //         if(left == -(textWidth)){
        //             left = 0
        //         }
        //         text.style.left = left + 'px'
        //     },20)
        // }else{

        // }
        if(textWidth >= divWidth ) {
            let left = -textWidth
            text.innerHTML += text.innerHTML
            setInterval(function(){
                left += 1
                if(left === 0 ){
                    left = -textWidth
                }
                text.style.left = left + 'px'
            },20)
        }else{

        }
    }
    getRoll()
</script>
</html>